<template>
  <PageModal
    :show="show"
    :title="modalTitle"
    :page-style="pageStyle"
    :footer-size="footerSize"
    :footer-style="footerStyle"
    @back="closeModal"
  >
    <view class="flex-spray">
      <!-- 标题 -->
      <view class="pageTop">
        <view class="pageTitle">{{ control.store.flexSprayContentTitle }}</view>
        <view class="page-des">
          <text>{{ $t('Dishwasher.Flexspray.AdjustParams.Des.Before.Text') }}</text>
          <text class="highlight">{{ $t('Dishwasher.Flexspray.AdjustParams.Des.Middle.Text') }}</text>
          <text>{{ $t('Dishwasher.Flexspray.AdjustParams.Des.Last.Text') }}</text>
          <image
            class="tips-icon"
            mode="aspectFit"
            :src="'/pages/appliance/static/ic_question_icon.png'"
            @click="washStrongDesVisible = true"
          ></image>
        </view>
      </view>
      <!-- 下碗篮（俯视） -->
      <view class="partition">
        <view class="page-img-box">
          <PartitionView type="flexSpray" :flex-spray-list="tempCustomFlexSprayList"></PartitionView>
        </view>
      </view>
    </view>

    <template #footer>
      <view class="btn-box">
        <view class="save-btn btn" @click="saveCustomMode">{{ $t('Dishwasher.Flexspray.Save.Button.Text') }}</view>
        <view class="only-one-start btn" @click="onlyOneStart">{{
          $t('Dishwasher.Flexspray.OnlyOneStart.Button.Text')
        }}</view>
      </view>
    </template>

    <Modal v-model:visible="washStrongDesVisible" title="洗涤强度说明" ok-text="知道了">
      <view class="modal-list" v-for="(item, index) in desList" :key="index">
        <text class="list-title">{{ item.title }}：</text>
        <text class="list-cont">{{ item.description }}</text>
      </view>
    </Modal>
  </PageModal>
</template>

<script setup lang="ts">
import PartitionView from '../partitionView.vue'
import Modal from '@/common/modal.vue'

import type { CSSProperties } from 'vue'
import { footerStyle, footerSize } from '@/layout/appliance/style'
import { setSetting } from '@/api/appliance'
import {
  DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_DELICATE,
  DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_NORMAL,
  DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_HEAVY,
} from '@/constants/Command'
import { useI18n } from 'vue-i18n'
import { TrackType, trackEvent } from '@/dataReport/tracks'
import { actionDebounce } from '@/utils/mpHelper'
import { safeTrack } from '@/dataReport/dataReportUtil'
import type { DishwasherController } from '@/controller/Dishwasher/definition'
import PageModal from '@/common/pageModal.vue'

export type FlexSprayListType = {
  key: string
  displayvalue: string
  value: string
}
type TrackData = {
  [x: string]: unknown
}
const props = defineProps<{
  show: boolean
  control: DishwasherController.Control
  tempCustomFlexSprayList: FlexSprayListType[]
}>()
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'open-adjust-params'): void
  (e: 'close'): void
}>()

const i18n = useI18n()

const pageStyle: CSSProperties = {
  backgroundColor: '#ffffff',
}
const modalTitle = computed(() => props.control.store.flexSprayModalTitle)
const flexSprayEnumType = [
  {
    key: DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_DELICATE,
    displayvalue: '轻柔',
  },
  {
    key: DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_NORMAL,
    displayvalue: '标准',
  },
  {
    key: DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_HEAVY,
    displayvalue: '强力',
  },
]
const desList = [
  { title: '轻柔', description: '适合轻状脏污的玻璃和陶瓷类餐具' },
  { title: '标准', description: '适合一般脏污的餐具' },
  { title: '强力', description: '适合重油污和粘腻的锅和餐具' },
]

const haId = computed(() => props.control.store._datasource.haId)
const isVirtual = computed(() => props.control.store.isVirtualAppliance)
const washStrongDesVisible = ref(false)

function closeModal() {
  emit('update:show', false)
  emit('close')
}

/**
 * 保存常用模式
 */
const saveCustomMode = actionDebounce({
  loadingText: i18n.t('APP.Common.Loading.Text'),
  call: async () => {
    if (isVirtual.value) {
      await new Promise<void>((resolve) => {
        setTimeout(() => {
          resolve()
          nextTick(() => {
            uni.showToast({
              title: i18n.t('APP.Common.SaveSucess.Text'),
              icon: 'success',
            })
            closeModal()
          })
        }, 3000)
      })
    } else {
      // 保存埋点逻辑
      safeTrack(() => {
        const trackarr: [{ key: string; value: string; displayvalue: string }] = JSON.parse(
          JSON.stringify(props.tempCustomFlexSprayList)
        )
        const trackData: TrackData = {}
        trackarr.map((items: { displayvalue: unknown }, index, arr) => {
          delete items.displayvalue
        })
        trackData.setting_obj = JSON.stringify({ ...trackarr })
        trackData.program_key = 'flexSpray'
        trackData.program_name = '精控强洗'

        trackEvent('save_CLS', trackData, TrackType.ApplianceDetail, 'Appliance.DishWasher.FlexSpray.Save')
      })

      let tempIndex1 = flexSprayEnumType.find(
        (item) => item.displayvalue === props.tempCustomFlexSprayList[0].displayvalue
      )?.key
      let tempIndex2 = flexSprayEnumType.find(
        (item) => item.displayvalue === props.tempCustomFlexSprayList[1].displayvalue
      )?.key
      let tempIndex3 = flexSprayEnumType.find(
        (item) => item.displayvalue === props.tempCustomFlexSprayList[2].displayvalue
      )?.key
      let tempIndex4 = flexSprayEnumType.find(
        (item) => item.displayvalue === props.tempCustomFlexSprayList[3].displayvalue
      )?.key
      Promise.all([
        setSetting(haId.value, props.tempCustomFlexSprayList[0].key, tempIndex1 as string),
        setSetting(haId.value, props.tempCustomFlexSprayList[1].key, tempIndex2 as string),
        setSetting(haId.value, props.tempCustomFlexSprayList[2].key, tempIndex3 as string),
        setSetting(haId.value, props.tempCustomFlexSprayList[3].key, tempIndex4 as string),
      ])
      await new Promise<void>((resolve) => {
        uni.showToast({
          title: i18n.t('APP.Common.SaveSucess.Text'),
          icon: 'success',
          duration: 2000,
        })
        setTimeout(function () {
          resolve()
          nextTick(() => {
            closeModal()
          })
        }, 2000)
      })
    }
  },
  catch: () => {
    uni.showToast({
      title: i18n.t('APP.Common.SaveFail.Text'),
      icon: 'error',
    })
  },
})

/**
 * 仅本次启动 -
 */
const onlyOneStart = actionDebounce({
  loadingText: i18n.t('APP.Common.Jumping.Text'),
  call: async () => {
    closeModal()
    emit('open-adjust-params')
  },
})
</script>

<style scoped lang="less">
.modal-list {
  font-weight: 400;
  font-size: 32rpx;
  line-height: 48rpx;
  opacity: 0.8;
  color: var(--dark-color);
  text-align: left;
}

// 底部按钮
.btn-box {
  width: 100%;
  display: flex;
  align-items: center;
  .btn {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-weight: 600;
    font-size: 32rpx;
  }
  .save-btn {
    width: 35%;
    color: var(--primary-color);
  }
  .only-one-start {
    width: 65%;
    background: var(--dark-color);
    color: #ffffff;
  }
}

.flex-spray {
  height: 100%;
  padding: 0 32rpx;
  overflow: hidden;
  .notyfy-text {
  }
  .pageTop {
    margin-top: 34rpx;
  }

  .pageTitle {
    font-weight: 500;
    font-size: 64rpx;
    line-height: 90rpx;
    color: var(--dark-color);
  }

  .page-des {
    font-weight: 400;
    font-size: 32rpx;
    line-height: 44rpx;
    color: var(--dark-color);
    margin-top: 16rpx;
    margin-bottom: 48rpx;
    .tips-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .page-des .highlight {
    font-weight: 500;
    color: var(--primary-color);
  }

  .pageImg {
    margin-top: 48rpx;
  }
  .page-img-box {
    width: 100%;
    height: 652rpx;
    padding: 24rpx;
    background-color: #f4f4f6;
    box-sizing: border-box;
    position: relative;
  }
}
</style>
